<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>

</head>
<body>


    <div id="app1">

        <!-- 复选框单独使用
            在勾选时,数据 checked 的值变为 true, label 中的渲染内容也会更新
         -->
        <div style="margin-bottom: 60px">
            <h4>复选框单独使用:</h4>
            <input type="checkbox" v-model="checked" id="checked" >
            <label for="checked">选择状态: {{ checked }}</label>
            <br>
        </div>


        <!-- 组合使用
            v-model 与 value 一起, 多个勾选框都绑定到同一个数组类型的数据, value 的值在数组当中就表示勾选状态,该过程是双向的,value的值
            也会自动 push 到这个数组中
         -->
        <div>
            <h4>复选框组合使用:</h4>
            <input type="checkbox" v-model="option" value="html" id="html">
            <label for="html">HTML</label>
            <br>

            <input type="checkbox" v-model="option" value="js" id="js">
            <label for="js">JS</label>
            <br>

            <input type="checkbox" v-model="option" value="css" id="css">
            <label for="css">CSS</label>
            <br>
            <p>选择的项是: {{ option }}</p>
        </div>

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {
                checked: false,
                option: []
            }
        });


    </script>

</body>
</html>